<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div
    class="wave_content"
    :style="{
      height: height + 'px',
      // background: '#2f3d65',
    }"
  >
    <div class="wave_progress">
      <div class="wave" :style="{ background: color }">
        <div id="number_contnet">
          <div>{{ percent }}</div>
          <div>{{ title }}</div>
        </div>
      </div>
      <div
        :id="'wave_mask' + index"
        class="wave_mask"
        :style="{
          top: 100 - percentage === 0 ? -90000 + '%' : 100 - percentage + '%',
        }"
      />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default: () => {},
    },
    height: {
      // 可以动态设置高度
      type: [Number, String],
      default: 230,
    },
    index: {
      // 使用v-for渲染时 index要唯一
      type: [String, Number],
      default: 0,
    },
    percentage: {
      // 进度为 0 - 100
      type: [Number],
      default: 2.22,
    },
    percent: {
      // 自己计算的百分比
      type: [Number, String],
      default: 22.22,
    },
    title: {
      type: String,
      default: "",
    },
    actual: {
      // 实际值
      type: String,
      default: "1232",
    },
    objective: {
      // 目标值
      type: String,
      default: "1234",
    },
    showActual: {
      type: Boolean,
      default: true,
    },
    showObjective: {
      type: Boolean,
      default: true,
    },
    color: {
      // 背景颜色
      type: String,
      default: "#15adf158",
    },
  },
  data() {
    return {
      // styles: this.data.styles,
    };
  },
  mounted() {},
  destroyed() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
@keyframes spin {
  50% {
    transform: translate(-50%, -101%) rotate(500deg);
  }
  100% {
    transform: translate(-50%, -101%) rotate(1000deg);
  }
}
.wave_content {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;
}
.wave_progress {
  width: 86px;
  height: 70px;
  // border-radius: 50%;
  // background: rgba($color: #000000, $alpha: 0);
  overflow: hidden;
  position: relative;
  // border: 3px solid #e4e7ef;
  box-sizing: border-box;
  .wave {
    position: relative;
    width: 100%;
    height: 100%;
    // background-image: linear-gradient(-180deg, #07c2b7 13%, #07c2b7 100%);
    // border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
  .wave_mask {
    position: absolute;
    width: 180px;
    height: 180px;
    top: 0;
    left: 50%;
    border-radius: 45%;
    transform: translate(-50%, -101%) rotate(0);
    animation-name: spin;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-duration: 16s;
    animation-iteration-count: infinite;
    z-index: 20;
    background-color: #ffffff57;
  }
}
#number_contnet {
  position: absolute;
  color: #000;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  z-index: 100;
}
</style>
